<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>index</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <ul>
        <li v-for="news in newsList" :key="news.id">{{news.title}}--{{news.content}}</li>
      </ul>
      <button @click="change1">修改第一条新闻的标题</button>
      <button @click="change2">修改第一条新闻的内容</button>
      <button @click="change3">修改第一条新闻</button>
    </div>

    <script type="text/javascript">
      let vm = new Vue({
        el:'#demo',
        data:{
          newsList:[
            {id:'asdftrafs01',title:'《震惊，2男子竟然在教室做出这种事》',content:'学习这种事'},
            {id:'asdftrafs02',title:'《独家报道，尚硅谷程程居然.....》',content:'居然是个女的'},
            {id:'asdftrafs03',title:'《想一夜暴富吗？想走上人生巅峰吗？》',content:'学IT吧'},
            {id:'asdftrafs04',title:'《这种食物，吃了必死！》',content:'百草枯'}
          ]
        },
        methods:{
          change1(){
            this.newsList[0].title = '《不震惊了，2男子在学习》'
          },
          change2(){
            this.newsList[0].content = '往死里学'
          },
          change3(){
            // this.newsList[0] = {id:'aytafsdytfyfs01',title:'《xxx》',content:'yyy'}
            this.newsList.splice(0,1,{id:'aytafsdytfyfs01',title:'《xxx》',content:'yyy'})

            console.log(this.newsList.splice === Array.prototype.splice)
          }
        }
      })
      console.log(vm)
    </script>
  </body>
</html>